<template>
  <div class="status_tab">
    <section v-for="(item,key,index) in datas" :class="{'activity':item.value===select}" :style="{'border-bottom-width':item.value===select?(indicator+'px'):'0px'}" :key="index" @click="onChange(item.value)">{{ item.label }}</section>
  </div>
</template>
<script>

export default {
  props: {
    select: {
      type: String,
      default: ''
    },
    indicator: {
      type: Number,
      default: 1
    },
    datas: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      dataSource: []
    }
  },
  methods: {
    onChange(v) {
      this.$emit('update:select', v)
      this.$emit('onChange', v)
    }
  }
}
</script>

<style scoped>
.status_tab{
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}
.status_tab section{
  margin-left: 25px;
  cursor: pointer;
  color: #666;
  height: 100%;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
}
.status_tab  .activity{
  color: #01020a;
  border-style:solid;
  border-color: #FAC400;
  border-width: 0px;
}
</style>

